
{% extends 'base.html' %}
{% load static %}





{% block content %}

<div class="card">
  <div class="card-header">
      <h3>hi, {{ current_user.user.username }}</h3>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-4 offset-md-1 user-image">
        {% if current_user.user.userprofile.picture %}
          <img src="{{ current_user.user.userprofile.picture.url }}" alt="用户头像" class="rounded-circle" width="200" height="200" id="user_picture_img">
        {% else %}
        <img src="{% static 'img/bs.png' %}" alt="用户头像" class="rounded-circle" width="200" height="200" id="user_picture_img">
          {% endif %}
      </div>
      <div class="col">
        <!-- https://www.qdskill.com/docs/bootstrap/docs/4.0/components/forms/
         -->
          <form action="{% url 'accounts:userprofile' %}" method="post" novalidate  enctype="multipart/form-data">
{#            {% csrf_token %}#}

              <div class="form-group row">
                  <label for="inputUser" class="col-sm-2 col-form-label">姓名</label>
                  <div class="col-sm-10">
                    <input type="text" readonly class="form-control" id="inputUser" name="username" placeholder="username" value="{{ current_user.user.username }}">
                  </div>
              </div>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" name="email" placeholder="Email" value="{{ current_user.user.email }}">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputPhoneNumber" class="col-sm-2 col-form-label">手机</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputPhoneNumber" name="phoneNumber" placeholder="13588888888" value="{{ current_user.user.userprofile.phone_number }}">
                </div>
              </div>

              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">性别</legend>
                  <div class="col-sm-10">
                    <div class="form-check">
                      <!-- <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="1" checked> -->
                      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="1" 
                      {% if current_user.user.userprofile.sex == '1' %}
                      checked
                      {% endif %}
                      >
                      <label class="form-check-label" for="gridRadios1">
                        男
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="2"
                      {% if current_user.user.userprofile.sex == '2' %}
                      checked
                      {% endif %}
                      >
                      <label class="form-check-label" for="gridRadios2">
                        女
                      </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <label class="" for="user_picture">
                  选择头像(200x200)
                </label>
              <div class="form-group row">
                  <div class="col-sm-10">
                  <input type="file" name="picture" class="form-control-file" id="user_picture">
                </div>
              </div>
              <div class="form-group row">
                <div class="col-sm-10">
                  <button type="submit" class="btn btn-primary">更新</button>
                </div>
              </div>
            </form>
      </div>
    </div>
  </div>
</div>


{% endblock %}
{% block js %}
<script src="{% static 'js/edit.js' %}"></script>
{% endblock %}
